<template>
  <div>
    <v-title :title="title"></v-title>
    <div class="todo-box">
      <div class="item" v-for="item in list" :key="item.title" @click="jumpPage(item)">
        <span>{{item.value}}</span>
        <p>{{item.title}}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vTitle from './title.vue'

  @Component({
    components: {
      vTitle
    }
  })
  export default class Todo extends Vue {
    @Prop({
      default: () => []
    }) list
    @Prop({
      default:''
    }) title

    jumpPage (item) {
      this.$router.push({path:item.path})
    } 
  }
</script>

<style lang="less" scoped>
  .todo-box {
    display: flex;
    justify-content: space-around;
    width: 60%;
    margin: 0 auto;
    .item {
      height: 170px;
      width: 160px;
      font-size: 60px;
      text-align: center;
      cursor: pointer;
      span {
        line-height: 100px;
      }
      p {
        font-size: 24px;
        color: #fff;
        padding-top: 14px;
      }
      &:first-child {
        background: url("https://hpx-boss.oss-cn-qingdao.aliyuncs.com/static/todo1.png") center no-repeat /100%;
        color: #F55205;

      }
      &:nth-child(2) {
        background: url("https://hpx-boss.oss-cn-qingdao.aliyuncs.com/static/todo2.png") center no-repeat /100%;
        color: #5CB87A;
      }
      &:nth-child(3) {
        background: url("https://hpx-boss.oss-cn-qingdao.aliyuncs.com/static/todo3.png") center no-repeat /100%;
        color: #4E93FF;
      }
      &:nth-child(4) {
        background: url("https://hpx-boss.oss-cn-qingdao.aliyuncs.com/static/todo4.png") center no-repeat /100%;
        color: #F8C62E;
      }
      &:nth-child(5) {
        background: url("https://hpx-boss.oss-cn-qingdao.aliyuncs.com/static/todo5.png") center no-repeat /100%;
        color: #4BB6AC;
      }
      &:nth-child(6) {
        background: url("https://hpx-boss.oss-cn-qingdao.aliyuncs.com/static/todo6.png") center no-repeat /100%;
        color: #7886CB;
      }
    }
  }
</style>
